<template>
<div>
 <canvas
        class="painter"
        ref="my_canvas"
        :width="my_canvas_w"
        :height="my_canvas_h"
        @touchstart="start($event)"
        @touchmove="draw($event)"
        @touchup="()=>{isDraw= false}"
    ></canvas>
    <div class="painter-fun" style="z-index: 9">
        <div
            class="fun-icon iconfont icon-noun__cc"
            @click="on_set_paintbrush_size"
        ></div>
        <div
            class="fun-icon iconfont icon-xiangxiazhanhang"
            @click="painter_download"
        ></div>
    </div>
    <popup
        :is_popup="is_popop"
        :popup_floor="5"
        :distance_bottom="44"
        @em_show_popup="on_set_paintbrush_size"
    >
        <div>{{paintbrush_size}}</div>
        <slider :slider_current="paintbrush_size" @em_slider_current="em_slider_current"></slider>
    </popup>
</div>
   
</template>

<script setup>
import utils from "../../assets/js/utils"
import {  ref } from "@vue/reactivity";
import { onMounted } from "vue";
import popup from "../../components/popup.vue";
import slider from "../../components/slider.vue";

// canvas的dom元素
let my_canvas = ref(null);
// canvas的宽高
let my_canvas_w = ref(0);
let my_canvas_h = ref(0);
// 是否显示弹出层
let is_popop = ref(false);
// 画笔的大小
let paintbrush_size = ref(1);

// canvas实例
let ctx = null;
//是否可画
let isDraw = false;

const start = (e) => {
    isDraw = true;
    let x = e.touches[0].clientX;
    let y = e.touches[0].clientY;
    ctx.strokeStyle = "#ffa8a8";
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineWidth = paintbrush_size.value;
    ctx.lineTo(x, y);
};
onMounted(() => {
    ctx = my_canvas.value.getContext("2d");
    my_canvas_w.value = document.documentElement.clientWidth;
    my_canvas_h.value = document.documentElement.clientHeight - 44;
});

//弹出设置画笔大小的框
const on_set_paintbrush_size = () => {
    is_popop.value = !is_popop.value;
};

//滑块当前的
const em_slider_current = (e) => {
    console.log(e)
    paintbrush_size.value = e
};

const draw = (e) => {
    if (!isDraw) return;
    let x = e.touches[0].clientX;
    let y = e.touches[0].clientY;
    ctx.strokeStyle = "#ffa8a8";
    ctx.lineTo(x, y);
    ctx.lineWidth = paintbrush_size.value; //设置画笔宽度
    ctx.lineCap = "round"; //角度圆滑
    ctx.lineJoin = "round";
    ctx.stroke();
};

//画像下载
const painter_download = (e) => {
    //判断是否为空画板
    if (!utils.is_canvas_blank(my_canvas.value)) {
        let a = document.createElement("a");
        a.download = "mood";
        a.href = my_canvas.value.toDataURL("image/png");
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    } else {
        console.log(123);
    }
};
</script>

<style lang="scss">
.painter {
    display: block;
    z-index: 1;
}

.painter-fun {
    width: 100%;
    height: 44px;
    background-color: #ffe3e3;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
    .fun-icon {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 30px;
        justify-content: center;
    }
}
</style>
